<template>
	<view>
		<view class="wrapper">
			<view class="list" v-if="list.length > 0">
				<view class="item" v-for="(item, index) in list">
					<view class="content">
						<view class="text">所属客户：{{ item.customerName || '' }}</view>
						<view class="text">出库时间：{{ formatTime(item.outTime) || '' }}</view>
						<view class="text">系列名称：{{ item.productName || '' }}</view>
						<view class="text">产品规格：{{ item.specifications || '' }}</view>
						<view class="text">防伪编码：{{ item.flowCode || '' }}</view>
						<view class="text">物流编码：{{ item.signCode || '' }}</view>
						<view class="text">质保时间：{{ item.vid || '' }}</view>
						<view class="text">生效时间：{{ formatTime(item.startTime) || '' }}</view>
						<video :src="item.videoUrl" v-if="item.videoUrl"></video>
						<image :src="item.oldVideoUrl" v-if="item.oldVideoUrl"></image>
					</view>
				</view>
			</view>

			<view class="loading flex-row row-center" v-if='list.length > 0'>
				<u-loading-icon :show="loading"></u-loading-icon>{{loadTitle}}
			</view>
			<view v-else>
				<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无内容" width="320" height="320"
					textSize="24"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWarrantyList
	} from '@/api/saleBack';
	import {
		mapGetters
	} from 'vuex';
	import {
		toLogin,
	} from '@/libs/login.js';
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				list: [],
				productName: '',
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userType']),

		onLoad(options) {
			this.productName = decodeURIComponent(options.productName);
			console.log('Received productName:', this.productName);
			// 在这里可以使用 productName 进行相关操作
		},

		onShow() {
			if (this.isLogin) {
				this.page = 1;
				this.list = [];
				this.loadend = false;
				this.getWarrantyList();
			} else {
				toLogin();
			}
		},

		methods: {
			formatTime(isoTime) {
				if (!isoTime) return '';
				const date = new Date(isoTime);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			//获取详情
			getWarrantyList() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				console.log('Received productName:', that.productName);
				getWarrantyList({
						userInfoId: that.uid,
						// userInfoId: 164,
						productName: that.productName,
						page: that.page,
						pageSize: that.limit,
					})
					.then(res => {
						let list = res.value.list || [];
						let loadend = list.length < that.limit;
						that.list = that.$util.SplitArray(list, that.list);
						that.$set(that, 'list', that.list);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
					});
			},

		},

		onReachBottom: function() {
			this.getWarrantyList();
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.wrapper {
		padding: 20rpx;
		font-size: 28rpx;
		color: #717171;
		line-height: 1.5;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.wrapper .list {
		padding: 0 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.wrapper .list .item {
		padding: 20rpx;
	}

	.wrapper .list .item~.item {
		border-top: 1rpx dotted #e3e3e3;
	}

	.wrapper .list .item .plate {
		color: #333;
		margin-bottom: 10rpx;
	}

	.wrapper .list .item .text {}

	.text-bold {
		font-weight: bold;
	}

	.loading {
		padding-top: 20rpx;
	}
</style>